<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Libraries</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

  const { Component } = React
  const { render } = ReactDOM

  class CountryList extends Component {

      constructor(props) {
        super(props)
        this.state = {
          countryNames: [],
          loading: false
        }
    }

    componentWillMount() {
      this.setState({ loading: true })
      fetch('https://restcountries.eu/rest/v1/all')
        .then(response => response.json())
        .then(json => json.map(country => country.name))
        .then(countryNames => this.setState({countryNames, loading: false}))
    }

    render() {
      const { countryNames, loading } = this.state
      return (loading) ?
             <div>Loading Country Names...</div> :
             (!countryNames.length) ?
               <div>No country Names</div> :
               <ul>
                {countryNames.map((x,i) => <li key={i}>{x}</li>)}
               </ul>
        }

    }

    render(
        <CountryList />,
        document.getElementById('react-container')
    )


  </script>
</body>
</html>
